<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LocalStorage Todos</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <div class="wrapper">
        <h2>LOCAL TAPAS</h2>
        <p></p>
        <ul class="plates">
            <li>Loading Tapas...</li>
        </ul>
        <form class="add-items">
            <input type="text" placeholder="Item Name" 
            required name="item"
            >
            <input type="submit" value="+Add Item">
        </form>
    </div>
    <script>
        const addItems = document.querySelector('.add-items');
        const itemsList = document.querySelector('.plates');
        const items = JSON.parse(localStorage.getItem('todos')) || [];
        // 函数式封装，拒绝流程式代码
        // 封装实现细节，比较难，封装的人和调用的人式两拨人
        // 复用
        // 函数的默认值是es6
        // 流程式的代码超过10行，一定要封装函数
        function populateList(plates=[],platesList) {

            platesList.innerHTML = plates.map((plate,i) => {
                return `
                    <li>
                        <input type="checkbox" data-index=${i} id="item${i}"
                        ${plate.done?'checked':''}
                        />
                        <label for="item${i}">${plate.text}</label>
                    </li>
                `
            })
            .join("");
        }
        function addItem(event) {
            event.preventDefault();//阻止默认行为
            //函数执行时会有this ,事件处理函数的时候，指向form
            console.log(this,'////')
            const text = (this.querySelector('[name=item]')).value.trim();
            const item = {
                text,
                done:false
            }
            items.push(item);
            // 持久化存储 key => value  字符串 
            localStorage.setItem('todos',JSON.stringify(items));
            populateList(items,itemsList);
        }
        function toggleDone(event){
            const el = event.target;
            console.log(el,'?/?/');
            if(el.tagName =='INPUT') {
                const index = el.dataset.index;
                items[index].done = !items[index].done;
                localStorage.setItem('todos',JSON.stringify(items));
                populateList(items,itemsList);
            }
        }
        addItems.addEventListener('submit',addItem);
        itemsList.addEventListener('click',toggleDone);
        populateList(items,itemsList);
    </script>
</body>
</html>